/**
 * Created by jacques on 16/5/18.
 */

$(document).ready(function () {

    var w=$(document).width();//显示设备宽度
    var wWidth;               //显示设备宽度
    var arg=58;               //锚点滚动差值
    var autoplay=5000;        //设置slide自动滚动时间

    //slide显示数目
    var slideNum=2;

    //非手机显示设备
    if(w<321){
        wWidth=w+34;
    }
    if(w<768){
        //锚点滚动距离差值变化
        arg=0;
        //设置slide自动滚动时间
        autoplay=0;
    }
    if(w>1020) {
        //根据显示设备不同调整slide显示数目
        slideNum = 5;
    }
    if(w>1200){
        //根据显示设备不同调整slide显示数目
        slideNum = 7;

        //icons鼠标经过效果
        var src;
        $('.jike-icons>div').hover(function () {
            src=$(this).find('.icon').attr('src');
            var arr=src.split('.');
            arr[0]=arr[0].slice(0,-2);
            var nSrc=arr.join('.');
            $(this).find('.icon').attr('src',nSrc);
        }, function () {
            $(this).find('.icon').attr('src',src);
        });

        //动态调整page的高度
        var dh=$(window).height();
        $('#page1').height(dh+'px');
        $('#page2').height(dh-58+'px');
        $('#page3').height(dh-58+'px');
        $('#page4').height(dh-58+'px');

        //slide7屏时调整层级关系和遮罩透明度
        changeSlideSize();
    }

    //实例化swiper
    addColor();
    var mySwiper = new Swiper ('.swiper-container', {
        width: wWidth||window.innerWidth,//在320以下的手机上slide变宽
        direction: 'horizontal',    //slide方向
        speed:1000,
        autoplay : autoplay,        //自动滚动速度
        loop: true,                 //是否循环
        slidesPerView:slideNum,     //同时显示多个slide的数量
        loopedSlides :7,
        spaceBetween:-90,           //slide之间的距离
        centeredSlides:true,        //将active的slide居中
        slideToClickedSlide:true,   //点击slide切换
        // 分页器
        pagination: '.swiper-pagination',
        paginationClickable: true,

        // 前进后退按钮
        nextButton: '.swiper-button-next',
        prevButton: '.swiper-button-prev',

        onSlideChangeStart: function(swiper){
            changeSlideSize();
            addColor();
        }
    });

    //移除slide灰度滤镜
    function addColor(){
        $('.swiper-slide img').addClass('gray');
        $('.swiper-slide-active>img').removeClass('gray');
    }
    //slide鼠标划过变色
    $('.swiper-slide').hover(function () {
       $(this).not('.swiper-slide-active').find('img').removeClass('gray') ;
    }, function () {
        $(this).not('.swiper-slide-active').find('img').addClass('gray') ;
    });

    //导航条锚点点击滚动
    $(".navbar-right a").click(function(e) {
        e.stopPropagation();

        //手机上点击跳转后 收起展开的nav
        $('.navbar-collapse').removeClass('in');
        //手机上点击跳转后 恢复展开的button的动画
        $('.icon-bar').eq(0).removeClass('rotate1').next().show().next().removeClass('rotate');

        //判断点击并跳转
        var index=$(this).index('.navbar-right a');
        if(index==0){
            $("html, body").animate({
                scrollTop: 0
            },600);
        }else{
            $("html, body").animate({
                scrollTop: $($(this).data("href")).offset().top - arg + "px"
            },600);
        }
        console.log(arg);

    });
    $('.navbar-brand').click(function () {
        $("html, body").animate({
            scrollTop: 0
        },600);
    });
    //page1动画
    $('#page1 .page-title,#page1 .page-info').addClass('active');

    //导航active点滚动时切换
    $(document).scroll(function () {
        var h=$(document).scrollTop();
        var ph1=$('#page2').offset().top-60;
        var ph2=$('#page3').offset().top-60;
        var ph3=$('#page4').offset().top-60;
        var ph4=$('#page5').offset().top-60;
        var ph5=$('footer').offset().top-60;
        if(h>0 && h<ph1){
            changeActiveNav(0);
        }
        if(h>ph1 && h<ph2){
            changeActiveNav(1);
        }
        if(h>ph2 && h<ph3){
            changeActiveNav(2);
        }
        if(h>ph3 && h<ph4){
            changeActiveNav(3);
        }
        if(h>ph4){
            changeActiveNav(4);
        }
        //页面动画显示
        if(h>ph1-200 && h<ph2-200) {
            $('#page2 .page-title,#page2 .page-info').addClass('active');

            //用SVG画出圆圈
            if($('#page2 .svg-panel').length>0) {
            }else{
                $('#page2').find('.svg-circle-s').html('<svg class="svg-panel" xmlns="http://www.w3.org/2000/svg" version="1.1">' +
                    '<circle class="path" cx="24" cy="24" r="23" stroke="#FD4701" stroke-width="1" fill="none" style="stroke-dasharray: 1000;stroke-dashoffset:1000;animation: dash 7s 1s linear forwards;"/><image src="images/cs2.png" width="27" height="27" /></svg>')
                    .prev('.svg-circle-m').
                    html('<svg class="svg-panel" xmlns="http://www.w3.org/2000/svg" version="1.1">' + '<circle cx="35" cy="35" r="34" stroke="#FD4701" stroke-width="1" fill="none" style="stroke-dasharray: 1000;stroke-dashoffset: 1000;animation: dash 5s 2s linear forwards;"/><image src="cm2.png" width="70" height="70" /></svg>')
                    .prev('.svg-circle-l').html('<svg class="svg-panel" xmlns="http://www.w3.org/2000/svg" version="1.1">' +
                    '<circle cx="86" cy="86" r="85" stroke="#FD4701" stroke-width="1" fill="none" style="stroke-dasharray: 1000;stroke-dashoffset: 1000;animation: dash 3s 3s linear forwards;"/><image src="images/cl2.png" width="170" height="170" /></svg>');
            }
        }
        if (h > ph2 - 200 && h < ph3 - 200) {
            $('#page3 .page-title,#page3 .page-info').addClass('active');

            //用SVG画出圆圈
            if($('#page3 .svg-panel').length>0){
            }else{
                $('#page3').find('.svg-circle-s').html('<svg class="svg-panel" xmlns="http://www.w3.org/2000/svg" version="1.1">' +
                    '<circle cx="28" cy="28" r="27" stroke="#FD4701" stroke-width="1" fill="none" style="stroke-dasharray: 1000;stroke-dashoffset: 1000;animation: dash 5s 1s linear forwards;"/><image src="cs3.png" width="56" height="56" /></svg>');
            }
        }
    });
    //切换当前锚点方法
    function changeActiveNav(n){
        $('.navbar-nav').find('.active').removeClass('active');
        $('.navbar-nav li').eq(n).addClass('active');
    }

    //slide7屏时调整层级关系和遮罩透明度
    function changeSlideSize(){
        //还原
        $('.swiper-slide').css({'z-index':3,'transform':'scale(.85,.85)'}).find('.hoverbg').css('background','rgba(244,245,250,.7)');
        $('.swiper-slide-prev').css({'z-index':5,'transform':'scale(.95,.95)'}).find('.hoverbg').css('background','rgba(244,245,250,.4)');
        $('.swiper-slide-next').css({'z-index':5,'transform':'scale(.95,.95)'}).find('.hoverbg').css('background','rgba(244,245,250,.4)');
        $('.swiper-slide-active').css({'z-index':9,'transform':'scale(1,1)'}).find('.hoverbg').css('background','rgba(244,245,250,0)');
        //重设
        $('.swiper-slide-prev').prev().prev().css({'z-index':2,'transform':'scale(.8,.8)'}).prev().css({'z-index':2,'transform':'scale(.75,.75)'});
        $('.swiper-slide-next').next().next().css({'z-index':2,'transform':'scale(.8,.8)'}).next().css({'z-index':1,'transform':'scale(.75,.75)'});
        $('.swiper-slide-next').next().find('.hoverbg').css('background','rgba(244,245,250,.55)');
        $('.swiper-slide-prev').prev().find('.hoverbg').css('background','rgba(244,245,250,.55)');
    }


});